<template>
	<div class="skeleton-view">
		<div class="skeleton-global sk-avater"></div>
		<div class="skeleton-global sk-name"></div>
		<div class="global-display sk-data-user">
			<p class="skeleton-global sk-data-user" v-for="item in 3"></p>
		</div>
		<!--  -->
		<div class="sk-user-infor global-display global-a-items">
			<div class="global-display global-f-direction global-a-items" v-for="item in 4">
				<p class="skeleton-global"></p>
				<p class="skeleton-global"></p>
			</div>
		</div>
		<!--  -->
		<div class="sk-travel global-display global-f-wrap">
			<p class="skeleton-global" v-for="item in 8"></p>
		</div>
	</div>
</template>

<script>
</script>

<style scoped>
.sk-avater{
	width: 70px;
	height: 70px;
	border-radius: 50% !important;
}
.sk-name{
	width: 30%;
	height: 30px;
	margin: 10px 0;
}
.sk-data-user p{
	width: 20%;
	height: 30px;
	margin-right: 10px;
}
.sk-user-infor div{
	width: calc(25% - 5px*2);
	margin: 5px;
}
.sk-user-infor p:nth-child(1){
	width: 50px;
	height: 50px;
	border-radius: 30%;
	margin: 20px 0 5px 0;
}
.sk-user-infor p:nth-child(2){
	width: 70px;
	height: 30px;
}
.sk-travel{
	margin: 10px 0;
}
.sk-travel p{
	width: calc(50% - 5px*2);
	margin: 5px;
	height: 200px;
}
</style>